<!--
 * @Author: zhangyang
 * @Date: 2022-03-01 20:04:26
 * @LastEditTime: 2022-03-14 10:50:28
 * @Description: 角色列表
-->
<script lang="ts" setup>
import useFormMode from '@/hooks/useFormMode';
import { NButton, NSpace, NSwitch, NTag } from 'naive-ui';
import type { TableDataItem, TableHeadItemPro } from '@/typings/table';
import type { EditNodeItem, Role } from '@/typings/type';
import { addRole, delRole, editRole, getNodeList, getRoleList } from '@/api/system';
import { expandNodeKeys } from '@/stores';

const FORM_TEMP: Role = {
  autoid: 0,
  is_enable: 1,
  parent_role_id: 0,
  role_desc: '',
  role_name: '',
  role_access: ''
};
const showPriority =ref(false);
const accessNodes = ref<number[]>([]);

const tableHeadPro: TableHeadItemPro<EditNodeItem>[] = [
  { type: 'selection' },
  { key: 'node_name', title: '节点名称' },
  { key: 'autoid', title: '节点ID' },
  { key: 'parent_id', title: '父节点' },
  { key: 'node_path', title: '鉴权路径' },
  { key: 'node_desc', title: '节点描述' },
  { key: 'is_show', title: '隐藏/显示', render: (row) => h(NSwitch, { value: !!row.is_show, disabled: true }) },
  { key: 'node_type', title: '节点级别' },
];
const tableDataPro = ref<TableDataItem<EditNodeItem>[]>([]);

(async () => {
  const nodeArr = await getNodeList();
  tableDataPro.value = deepClone(nodeArr);
})();

const {
  isAdd,
  isEdit,
  edit,
  del,
  sure,
  clear,
  form
} = useFormMode<Role>(FORM_TEMP, {
  addCbk: async () => {
    await addRole(form.value);
    window.$message.success('新增成功！');
  },
  modCbk: async () => {
    if (showPriority.value) {
      form.value.role_access = accessNodes.value.join(',');
    }
    await editRole(form.value);
    window.$message.success('修改成功！');
  },
  delCbk: async (row) => {
    await delRole(row.autoid);
    window.$message.success('删除成功！');
  },
  cgEffect: () => getList(),
  cpEffect: (row) => {
    if (showPriority.value) {
      accessNodes.value = row.role_access.split(',').map((i) => parseInt(i));
    } else {
      accessNodes.value.length = 0;
    }
  },
  extraClear: () => showPriority.value = false
});

const renderOperate = (row: TableDataItem<Role>) => {
  return h(NSpace, {}, {
    default: () => row.autoid === 1
      ? h(NTag, { type: 'success' }, {
          default: () => '超级管理员拥有全部权限'
        })
      : [
          h(
            NButton,
            { size: 'small', onClick: () => edit(row) },
            { default: () => '信息编辑' }
          ),
          h(
            NButton,
            { 
              type: 'info', size: 'small', ghost: true, onClick: () => {
                showPriority.value = true;
                edit(row);
                isEdit.value = false;
              }
            },
            { default: () => '权限编辑' }
          ),
          h(
            NButton,
            { type: 'error', size: 'small', ghost: true, onClick: () => del(row) },
            { default: () => '删除' }
          ),
        ]
  })
};
const tableHead: TableHeadItemPro<Role>[] = [
  { key: 'autoid', title: '角色ID' },
  { key: 'parent_role_id', title: '父级角色ID' },
  { key: 'role_name', title: '角色名称' },
  { key: 'role_desc', title: '角色描述' },
  { key: 'is_enable', title: '禁用/启用', render: (row) => h(NSwitch, { value: !!row.is_enable, disabled: true }) },
  { key: 'autoid', title: '操作', render: renderOperate, width: '320' }
];
const tableData = ref<TableDataItem<Role>[]>([]);
const getList = async () => {
  const arr = await getRoleList();
  tableData.value = deepClone(arr);
};

getList();
</script>

<route lang="yaml">
meta:
  title: 角色列表
  authPath: 10000/8
</route>

<template>
  <div class="m-2">
    <NButton type="success" ghost @click="isAdd=true">添加角色</NButton>
  </div>
  <div class="m-2">
    <YoungTablePro
      :table-data="tableData"
      :table-head="tableHead"
    />
  </div>
  <!-- 基础信息编辑 -->
  <YoungDialog
    :is-add="isAdd"
    :is-edit="isEdit"
    @sure="sure"
    @clear="clear"
  >
    <template #body>
      <NForm :model="form" label-placement="left">
        <NFormItem label="角色名称">
          <NInput v-model:value="form.role_name" />
        </NFormItem>
        <NFormItem label="角色描述">
          <NInput v-model:value="form.role_desc" />
        </NFormItem>
        <NFormItem label="父角色id">
          <NInputNumber v-model:value="form.parent_role_id" :min="0" :disabled="isEdit" />
        </NFormItem>
        <NFormItem label="角色状态">
          <NRadioGroup v-model:value="form.is_enable">
            <NSpace>
              <NRadio :value="0">禁用</NRadio>
              <NRadio :value="1">启用</NRadio>
            </NSpace>
          </NRadioGroup>
        </NFormItem>
      </NForm>
    </template>
  </YoungDialog>
  <!-- 权限编辑 -->
  <YoungDialog
    real-title="权限编辑"
    :is-edit="showPriority"
    style="width: 80vw; top: 5vh;"
    @sure="sure"
    @clear="clear"
  >
    <template #body>
      <YoungTablePro
        :table-data="tableDataPro"
        :table-head="tableHeadPro"
        children-key="part"
        :row-key="(item: EditNodeItem) => item.autoid"
        v-model:checked-row-keys="accessNodes"
        :cascade="false"
        :max-height="600"
        v-model:expanded-row-keys="expandNodeKeys"
      />
    </template>
  </YoungDialog>
</template>